<template>
	<div class='user-dashboard'>
		<nav>
			<Left  @changeTitle="routeTitle=$event" />
		</nav>
		<main>
			<header><h2>{{routeTitle}}</h2></header>
			<div class="dashboard-content">
				<router-view />
			</div>
		</main>
	</div>
</template>

<script lang="ts">
export default {
  route: {
    name: 'Test',
    meta: {
      isLogin: true,
      role: 'Author'
    }
  }
}
</script>
<script setup lang="ts">
import { ref } from 'vue'
import Left from './components/Left.vue'

const routeTitle = ref('基础信息')

</script>

<style lang="scss" scoped>
.user-dashboard {
  $leftWidth: 280px;
  $headerHeight: 88px;

  nav {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    width: $leftWidth;
    overflow-y: auto;
    border-right: $borderLight;
  }

  main {
    padding-left: $leftWidth;

    header {
      position: fixed;
      top: 0;
      right: 0;
      left: $leftWidth;
      z-index: 10;
      height: $headerHeight;
      line-height: $headerHeight;
      text-align: center;
      background-color: #ffffff;
      border-bottom: $borderLight;
    }

    h2 {
      line-height: $headerHeight;
    }

    .dashboard-content {
      min-height: 100vh;
      padding: calc($headerHeight + 24px) 30px 30px;
      background-color: rgba(0, 0, 0, 0.033);
    }
  }
}
</style>
